<template>
	<view class="box">
		<!-- 顶部头像 基本信息 -->
		<view class="top">
			<task-top-details :avatar="avatar" :nickName="nickName" :state="state"></task-top-details>
		</view>

		<view class="other">
			<!-- 可接单和进行中tab栏 -->
			<view class="tab">
				<base-tab-list class="tab" :otherStyle="customStyle" :tabIndex="tabIndex" :tabList="tabList"
					@changeTab="changeTab">
				</base-tab-list>
			</view>

			<!-- 可接单列表 -->
			<view class="content">
				<scroll-view class="left" v-if="tabIndex == 0 " scroll-y="true">
					<view v-for="(item,index) in orderListData">
						<general-tasks @acceptList="acceptList" @refuseList="refuseList" titleDec="任务分派"
							:tabIndex="tabIndex" :equipmentModel="item.machineModelNumber"
							:faultDec="item.faultTypeName" :repairAreaDec="item.address.district.name"
							:contactNumberDec="item.user.phone" :orderId="item.id" :otherStyle="marginStyle">
						</general-tasks>
					</view>
				</scroll-view>


				<!-- 维修进行中列表 -->
				<scroll-view class="right" v-if="tabIndex == 1" scroll-y="true">
					<view v-for="(item,index) in inProgressData">
						<general-tasks titleDec="任务详情"
							:tabIndex="tabIndex" @viewDetails="viewDetails" :taskState="item.stateName" :equipmentModel="item.machineModelNumber"
							:faultDec="item.faultTypeName" :repairAreaDec="item.address.district.name"
							:contactNumberDec="item.user.phone" :orderId="item.id" :machineModelNumber="item.machineModelNumber" :otherStyle="marginStyle">
						</general-tasks>
					</view>
				</scroll-view>


			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config"; // 导入配置文件
	// 基本路径
	const baseURL = config.baseURL;

	export default {
		data() {
			return {
				tabList: [{
						label: "可接单"
					},
					{
						label: "进行中"
					}
				],

				tabIndex: 0,
				customStyle: {
					justifyContent: "space-around", // 传递自定义的样式属性对象
				},
				marginStyle: {
					marginTop: "50rpx" // 使用驼峰式命名，并去掉分号
				},
				clickLabel: '',
			};
		},
		props: {
			orderListData: {
				type: Array,
				default: () => []
			},
			inProgressData: {
				type: Array,
				default: () => []
			},
			avatar: {
				type: String,
				default: ""
			},
			nickName:{
				type: String,
				default:""
			},
			state:{
				type: String,
				default:""
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index; // 更新标签索引
				console.log("task组件打印点击的tab下标", index);

				this.clickLabel = this.tabList[index].label;
				console.log("task组件打印点击的tab名称", this.clickLabel);

				this.$emit("getTabIndex", index);
			},
			acceptList(orderId) {
				console.log("接单工单ID：", orderId);
				this.$emit("acceptOrder", orderId);
			},
			refuseList(orderId) {
				console.log("拒绝工单ID：", orderId);
				this.$emit("refuseOrder", orderId);
			},
			viewDetails(orderId,taskState,machineModelNumber) {
				console.log("查看的工单ID：", orderId,taskState,machineModelNumber);
				this.$emit("viewOrderDetails", orderId,taskState,machineModelNumber);
			},

		},
		onLoad() {


		}
	};
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}


	.box {
		// background-color: #333333;
		height: 100vh;

		.top {
			background-color: antiquewhite;
			width: 100vw;
			height: 150rpx;
			position: fixed;
			top: 0;
			left: 0;
		}

		.other {
			position: fixed;
			top: 150rpx;
			left: 0;
			height: calc(100% - 150rpx);
			// background-color: #333333;


			.tab {
				// background-color: #aaaa7f;
				width: 100vw;
				height: 90rpx;
			}

			.content {
				// background-color: #ffaaff;
				margin-top: 30rpx;
				height: 1000rpx;
				width: 100vw;

				.left {
					height: 900rpx;
					width: 100vw;
				}

				.right {
					height: 900rpx;
					width: 100vw;
				}
			}
		}

	}
</style>
